<template>
  <j-modal title="匹配供应商" :width="900" :visible.sync="modalVisible" :maskClosable="false">
    <a-divider orientation="left"> 账号信息 </a-divider>
    <a-form-model ref="form" :model="formData" :rules="rules">
      <a-form-model-item label="供应商名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierId">
        <j-url-select-search
          placeholder="请搜索选择供应商"
          v-model="formData.supplierId"
          :allowClear="false"
          url="/hzkj-product/product/productLibrary/supplier/list?pageNo=1&pageSize=10"
          :optionDiy="optionDiy"
          @change="supplierNameChange"
        />
      </a-form-model-item>
      <a-form-model-item label="采购链接" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="url">
        <a-input v-model="formData.url" placeholder="请输入采购链接"></a-input>
      </a-form-model-item>
      <a-form-model-item prop="specs" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <template #label> <span style="color: red">*</span>入库规格 : 供应商规格 </template>
        <div class="specs-box">
          <a-form-model-item prop="specsMy">
            <a-input-number
              v-model="formData.specsMy"
              placeholder="入库规格"
              :min="1"
              :max="999999"
              :step="1"
              :precision="0"
            >
            </a-input-number>
          </a-form-model-item>
          <div class="split-ico">:</div>
          <a-form-model-item prop="specsSup">
            <a-input-number
              v-model="formData.specsSup"
              placeholder="供应商规格"
              :min="1"
              :max="999999"
              :step="1"
              :precision="0"
            >
            </a-input-number>
          </a-form-model-item>
          <a-tooltip placement="right">
            <template slot="title">
              <div>入库规格：2 则表示入库的时候是按照2/组作为 1 个入库。</div>
              <div>供应商规格：10则表示采购的时候是按照10/组作为 1 个采购。</div>
            </template>
            <a-icon type="info-circle" class="circle-ico" />
          </a-tooltip>
        </div>
      </a-form-model-item>
      <a-form-model-item label="最低起订量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="receiveAddress2">
        <a-input-number
          style="width: 200px"
          v-model="formData.lowCount"
          :min="1"
          :step="1"
          :precision="0"
          placeholder="请输入"
        />
      </a-form-model-item>
    </a-form-model>
    <template #footer>
      <a-button @click="modalVisible = false"> 取消 </a-button>
      <a-button type="primary" @click="handleOk"> 确定 </a-button>
    </template>
  </j-modal>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false,
      submitLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      formData: {},
      rules: {
        supplierId: [{ required: true, message: '请选择供应商!' }],
        specsMy: [{ required: true, message: '请输入入库规格!' }],
        specsSup: [{ required: true, message: '请输入供应商规格!' }],
      },
    }
  },
  methods: {
    api_open() {
      this.formData = {}
      this.modalVisible = true
    },
    optionDiy(result) {
      return result.records.map((item) => {
        return {
          ...item,
          value: item.id,
          text: `${item.name}_${item.code}_${item.supplierStatus_dictText}`,
        }
      })
    },
    supplierNameChange(val, oldValue, obj) {
      this.formData.supplierName = obj.name
    },
    // 产品提交
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.formData)
          this.modalVisible = false
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.specs-box {
  display: flex;
  /deep/ .ant-form-item {
    margin-bottom: 0;
  }

  .split-ico {
    margin: 5px;
    font-weight: bold;
  }

  .circle-ico {
    margin: 10px 0 0 10px;
  }
}
</style>
